<template>
	<view v-if="pageShow">
		<u-swiper autoplay="true" interval="3000" height="981rpx" indicator="true" :list="list3" indicatorMode="line"
			circular @click="previewImages(list3,index)"></u-swiper>
		<view class="nav">
			<view class="color_ling text_g">{{invitationInfo.title}}</view>
			<view class="text_b color_jiu margin_top">{{invitationInfo.createtime_text}}</view>
			<view class="title  margin_top" style=" letter-spacing: 5rpx;">
				{{invitationInfo.content}}<text style="color: rgba(212, 139, 57, 1);">#{{invitationInfo.bq}}</text>
			</view>
		</view>
		<!-- 评论 -->
		<view class="section">
			<template v-if="invitationCommList.total">
				<view class="comment">评论 ({{invitationCommList.total}})</view>
				<view class="flexstart aside" v-for="item in invitationCommList.data" :key="item.id"
					@click="plTr(item)">
					<view class="ya">
						<view class="image_ya">
							<image :src="item.user.avatar_text" mode=""></image>
						</view>
					</view>
					<view>
						<view class="margin_top text_g color_ling">{{item.user.nickname}}</view>
						<view class="pinglunqu  text_f color_san">{{item.content}}</view>
						<view class="year text_a  color_jiu">{{item.createtime_text}}</view>
						<!-- 子评论 -->
						<view class="flexstart aside" style="border-bottom: none;" v-for="value in item.child"
							:key="value.id">
							<view class="ya">
								<view class="image_ya">
									<image :src="value.user.avatar_text" mode=""></image>
								</view>
							</view>
							<view>
								<view class="margin_top text_g color_ling">{{value.user.nickname}}</view>
								<view class="pinglunqu  text_f color_san">{{value.content}}</view>
								<view class="year text_a  color_jiu">{{value.createtime_text}}</view>
							</view>
						</view>
					</view>
				</view>
			</template>
		</view>
		<!-- footer -->
		<view class="footer flexbetween">
			<view class="flexleft">
				<view class="flexcolumn">
					<button open-type="share" class="footer_stars">
						<image src="/static/image/home/share.png" mode="" style="width: 26rpx; height: 26rpx;"></image>
						<view class="share" style="margin-top: 14rpx;">分享</view>
					</button>
				</view>
				<view class="flexcolumn praise" style="position: relative;">
					<image src="../static/image/home/kheart.png" mode="" class="img_zan" v-if="!invitationInfo.is_dz"
						@click="like"></image>
					<image src="../static/image/home/heart.png" mode="" class="img_zan" v-if="invitationInfo.is_dz"
						@click="like"></image>
					<view class="zan_num">{{invitationInfo.dz_num}}</view>
					<view class="share" style="margin-top: 11rpx;">点赞</view>
				</view>
			</view>
			<view class="sousuobox flexbetween" style="position: relative;">
				<input :focus="tipFocus" class="inputs" type="text" placeholder="说点什么吧"
					placeholder-class="color: rgba(197, 197, 197, 1);" v-model="content" @blur="setHfMsg(hfMsg.invitation_comment_id,hfMsg.reple_user_id)"
					@confirm="sendComm">
					<view class=""></view>
				<view class="margin_right2 send" @click="sendComm">发送</view>
			</view>
		</view>

	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				tipFocus: false,
				list3: [],
				page: 1,
				limit: 12,
				invitationId: "", //帖子id
				invitationInfo: {}, //帖子详情
				invitationCommList: { //评论列表
					data: []
				},
				content: "", //评论内容`
				hfMsg: {
					invitation_comment_id: "",
					reple_user_id: ""
				},
				pageShow:false
			}
		},
		onLoad(options) {
			this.invitationId = options.id
			this.getInvitationInfo()
			this.getInvitationCommList()
		},
		methods: {
			previewImages(arr, index) {
				let i = arr; //获取当前页面的轮播图数据

				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			getInvitationInfo() { //帖子详情
				let _this = this
				httpRequest.request('/api/invitation/invitationDetail', 'GET', {
					id: _this.invitationId,
				}).then(res => {
					if (res.code == 1) {
						this.invitationInfo = res.data
						this.list3 = res.data.images_text
						this.pageShow=true
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
						setTimeout(()=>{
							uni.navigateBack(1)
						},500)
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			getInvitationCommList(isPage, page) { //评论列表
				let _this = this
				httpRequest.request('/api/Invitation/commentList', 'GET', {
					page: page || 1,
					limit: _this.limit,
					id: _this.invitationId,
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.invitationCommList;
						if (isPage == true) {
							_this.invitationCommList.data = dataList.data.concat(resList.data);
						} else {
							this.invitationCommList = res.data
							_this.invitationCommList.data = resList.data;
						}
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onShareAppMessage() {
				return {
					title: this.invitationInfo.title,
					path: "pages_post/tiezixq?id=" + this.invitationId + "&rec_uid=" + uni.getStorageSync(
						"user_id"),
				}
			},
			onReachBottom() {
				let _this = this;
				let list = _this.invitationCommList;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.getInvitationCommList(true, page);
			},
			like() { //点赞、取消点赞
				let _this = this
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				httpRequest.request('/api/user/dzInvitation', 'GET', {
					id: _this.invitationInfo.id,
				}).then(res => {
					if (res.code == 1) {
						this.getInvitationInfo()
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 评论他人
			plTr(item) {
				console.log(item);
				this.setHfMsg(item.id, item.user_id)
				this.tipFocus = true
			},
			setHfMsg(val1, val2) {
				this.hfMsg = {
					invitation_comment_id: val1,
					reple_user_id: val2
				}
				if (val1 == "") {
					this.tipFocus = false
				}
				console.log(this.hfMsg, "999");
			},
			sendComm() { //评论
				let _this = this
				this.tipFocus = false
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				if (_this.content == "") {
					return false
				}
				httpRequest.request('/api/user/commentInvitation', 'GET', {
					invitation_id: _this.invitationInfo.id,
					content: _this.content,
					invitation_comment_id: _this.hfMsg.invitation_comment_id,
					reple_user_id: _this.hfMsg.reple_user_id
				}).then(res => {
					if (res.code == 1) {
						httpRequest.toast(res.msg);
						_this.content = ""
						this.getInvitationCommList()
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
				this.setHfMsg("", "")
			}
		}
	}
</script>

<style lang="scss" scoped>
	button::after {
		border: none;
	}

	button {
		padding: 0;
		border-radius: 0;
		background-color: #fff;
		line-height: 40rpx;
	}

	.footer_stars {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

	}
input:focus {
	    position: absolute;
	    bottom: 200rpx; 
	    left: 0;
	    margin: 0;
	    padding: 0;
	    width: 100%;
	    height: 100%;
	} 
	.zan_num {
		position: absolute;
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #D48B39;
		bottom: 57rpx;
		left: 40rpx;
	}
	.inputs{
		position: absolute;
		height: 50px;
		width: 60%;
	}

	.img_zan {
		width: 35rpx;
		height: 33rpx;
	}

	.praise {
		margin-left: 61rpx;
	}

	.share {
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.send {
		width: 20%;
		padding: 15rpx 23rpx;
		text-align: center;
		background: #D48B39;
		border-radius: 38rpx 38rpx 38rpx 38rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin: 0rpx;
	}

	.sousuobox {
		width: 65%;
		background: #F3F3F3;
		padding: 8rpx 9rpx 8rpx 30rpx;
		border-radius: 60rpx;
	}

	.footer {
		position: fixed;
		bottom: 0rpx;
		background-color: #ffff;
		padding: 60rpx 30rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.aside {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid RGBA(232, 232, 232, 1);
	}

	.image_ya {
		width: 77rpx;
		height: 77rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.comment {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.ya {
		padding: 34rpx 19rpx 0rpx 30rpx;
	}

	.pinglunqu {
		padding-top: 5rpx;
	}

	.year {
		padding-top: 17rpx;
	}

	.section {
		background-color: #fff;
		padding: 38rpx 30rpx 250rpx 30rpx;
	}

	.title {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.nav {
		padding: 45rpx 30rpx 23rpx 30rpx;
		border-bottom: 1rpx solid RGBA(232, 232, 232, 1);
	}
</style>